<template>
  <div class="base-filed-root">
    <div v-if="formData == null">
      无{{title}}信息，点击
      <el-button type="text" @click="addDataBtn">编辑</el-button>
      {{title}}信息。
    </div>
    <div class="base-filed-view" v-else>
      <div class="base-filed-content">
        <div class="base-filed-item" v-for="(item,index) in viewField" :key="index">
          <div class="base-filed-label"><i class="el-icon-document base-filed-label-prefix"></i>{{item.label}}:</div>
          <div class="base-filed-value" v-if="item.type == 'img'">
            <el-button type="text" @click="bigPic([formData[item.field][item.photoIndex]])">查看照片</el-button>
          </div>
          <div class="base-filed-value" v-else>{{formData[item.field]}}</div>
        </div>
      </div>
    </div>
    <lark-card border :x="300" :y="100" body-height="600px" :body-width="'500px'" v-if="editDataVisible" :hidden="!editDataVisible"
               @closeAction="editDataVisible = !editDataVisible"
               :card-title="`编辑${title}信息`" draggable
               :radius="false">

      <div class="edit-btd">
        <div class="edit-btd-form">
          <el-scrollbar>
            <div class="edit-btd-container">
              <el-form :ref="formRef" :model="formFiled" label-width="100px" :rules="rules">
                <slot name="form-item"></slot>
              </el-form>
            </div>
          </el-scrollbar>
        </div>
        <div class="edit-btd-footer">
          <el-button :loading="submitBtnLoading" @click="submit" round>确定</el-button>
        </div>
      </div>
    </lark-card>
  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, watch, computed } from '@vue/composition-api'
  import { larkViewer } from 'lark-common'
  import { sowList } from '@/api/industry/cpf'
  import { MathUtil } from 'lark-utils'
  import { getPicUrl } from '@/api/industry/file'
  import { Message } from 'element-ui'

  export default {
    name: 'base-filed',
    props: {
      rules: {
        type: Object,
        default: () => {
          return {}
        }
      },
      title: {
        type: String,
        default: '我是标题'
      },
      mid: {
        type: [String, Number],
        default: null
      },
      queryListAction: {
        type: Function,
        default: () => {
          return null
        }
      },
      submitDataAction: {
        type: Function,
        default: () => {
          return null
        }
      },
      submitBeforeAction: {
        type: Function,
        default: () => {
          return null
        }
      },
      loadListBefore: {
        type: Function,
        default: (response) => {
          return response
        }
      },
      viewField: {
        type: Array,
        default: () => {
          return []
        }
      },
      formFiled: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    components: {},
    setup(props, content) {
      let data = reactive({
        editDataVisible: false,
        formRef: `formRef${MathUtil.guid()}`,
        submitBtnLoading: false,
        getPicUrl: getPicUrl + '/',
        formData: null,
        editFormInit: {}
      })
      const bigPic = (picData) => {
        let pics = picData.map(pic => {
          return { src: data.getPicUrl + pic.fileName }
        })
        larkViewer(pics)
      }

      const submit = () => {
        try {
          content.refs[`${data.formRef}`].validate(async valid => {
            if (valid) {
              let requestData = props.formFiled
              if (props.submitBeforeAction != null) {
                requestData = JSON.parse(JSON.stringify(props.submitBeforeAction(props.formFiled)))
              }
              data.submitBtnLoading = true
              await props.submitDataAction({ filId: props.mid, ...requestData })
              Message.success('操作成功')
              loadData()
              data.editDataVisible = false
            }
          })
        } finally {
          data.submitBtnLoading = false
        }
      }

      const resetEditForm = () => {
        console.log(props.formFiled, data.editFormInit)
        Object.keys(props.formFiled).forEach(key => {
          props.formFiled[key] = data.editFormInit[key]
        })
      }
      const addDataBtn = () => {
        resetEditForm()
        data.editDataVisible = true
      }
      const loadData = async() => {
        let response = await props.queryListAction({ filId: props.mid })

        if (props.loadListBefore != null) {
          response = await props.loadListBefore(response)
        }

        if (response.rows.length == 0) {
          data.formData = null
        } else {
          data.formData = response.rows[0]
        }
      }
      onMounted(() => {
        data.editFormInit = JSON.parse(JSON.stringify(props.formFiled))
        loadData()
      })
      return { ...toRefs(data), bigPic, submit, resetEditForm, addDataBtn }
    }
  }
</script>

<style scoped lang="scss">
  .base-filed-root {


    .base-filed-content {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;

      .base-filed-item {
        display: flex;
        align-items: flex-end;
        margin-right: 30px;
        flex: 0 0 20%;
        line-height: 30px;


        .base-filed-label {
          font-style: italic;
          border-bottom: 1px green dashed;
          flex: 0 0 60%;

          .base-filed-label-prefix {
            color: green;
            margin: 0px 5px;
          }
        }

        .base-filed-value {
          flex: 0 0 40%;
          border-bottom: 1px green dashed;
        }
      }
    }

    .base-filed-view {
      .base-filed-pics {
        padding: 20px 30px 10px 30px;
      }
    }
  }
</style>
<style lang="scss">
  .edit-bfd {
    padding: 10px 5px;

    .edit-bfd-form {
      .edit-bfd-container {
        padding: 0px 10px;
      }

      height: calc(598px - 20px - 40px);
      padding-bottom: 10px;
    }

    .edit-bfd-footer {
      height: 40px;
      text-align: right;
      margin-right: 10px;
      margin-top: 10px;
    }
  }
</style>
